<template>
  <div class="my-aSide">
    <el-input
      style="width: 260px;margin-bottom: 10px;"
      placeholder="请输入表名称，回车检索"
      suffix-icon="el-icon-search"
      v-on:keyup.enter.native="search(searchValue)"
      v-model="searchValue">
    </el-input>
    <ul class="content">
      <li v-for="(tableName,index) in tableList" @click="clickLi(tableName.TABLE_NAME || tableName.name,index)"
          :key='index'
          :class="{'color':newIndex==index}" class="my-li">
        <span class="li-text" :title="tableName.TABLE_NAME || tableName.name">{{ tableName.TABLE_NAME || tableName.name }}</span>
      </li>
    </ul>
    <div class="text">共查询到{{tableList.length}}张表</div>
  </div>

</template>

<script>
export default {
  name: "ASide",
  props: ["tables"],
  data() {
    return {
      newIndex: "",
      searchValue: "",
      tableList: ""
    }
  },
  created() {
    this.tableList = this.tables
  },
  methods: {
    /*点击li列表*/
    clickLi(tableName, index) {
      this.$emit('changeTable', tableName)
      this.newIndex = index
    },
    /*li列表*/
    search(searchValue) {
      this.tableList = this.filterList({TABLE_NAME: searchValue}, this.tables)
    },
    /*过滤*/
    filterList(condition, data) {
      return data.filter(item => {
        return Object.keys(condition).every(key => {
          return String(item[key]).toLowerCase().includes(
            String(condition[key]).trim().toLowerCase())
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-aSide {
  overflow-y: hidden;
  border-right: 1px solid #EBEEF5;
  padding: 20px;
  //height: calc(100vh - 200px);
}

ul {
  padding: 0;
  margin: 0;
  height: calc(100vh - 263px);
  overflow-y: scroll;
  overflow-x: hidden;
}

li {
  list-style: none;
}

ul > li {
  position: relative;
  padding-left: 20px;
  line-height: 30px;
  cursor: pointer;
}

ul > li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #0044f0;
}

//ul > li:hover {
//  background: #0044f0;
//  color: #FFFFFF;
//}

ul > li:active {
  background: #0044f0;
}

.color {
  color: #FFFFFF;
  background: #0044f0;

}

.li-text {
  width: 220px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: -10px;
}
.text{
  padding: 10px 0 10px 0;
  color: #0044f0;
  font-size: 14px;
}
</style>
